---
title: 首屏加载计算
date: 2023-01-16 20:10:43
images: https://kodo.huixiangwuyou.com/blog/images/3c51c917f.jpg
summary: '前端性能优化是提高网站或应用程序加载速度、响应性和用户体验的重要手段'
tags: 
 - web
---

考虑的层面有：
1、网络层面：减少 HTTP 请求、启用缓存、优化图片、CDN 加速
2、代码层面：压缩代码、优化代码结构、优化 JavaScript 执行、减少重排和重绘、使用事件委托、使用懒加载等
3、页面结构层面：优化 HTML 结构、首屏优化、异步加载资源 等
4、其他方面：优化字体加载、监测和分析等


#### 计算加载时间
![](https://kodo.huixiangwuyou.com/blog/images/web/20250117163915.png)
```javascript
var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
var type = connection.effectiveType;

function updateConnectionStatus() {
  console.log("Connection type changed from " + type + " to " + connection.effectiveType);
  type = connection.effectiveType;
}

connection.addEventListener('change', updateConnectionStatus);

window.addEventListener('DOMContentLoaded', (event) => {
 let timing = performance.getEntriesByType('navigation')[0];
 console.log(timing.domInteractive);
 console.log(timing.fetchStart);
 let diff = timing.domInteractive - timing.fetchStart;
 console.log("TTI: " + diff);
})

window.addEventListener('load', () => {
  setTimeout(() => {
   const timing = window.performance.timing;
   console.log('DNS查询耗时：', timing.domainLookupEnd - timing.domainLookupStart)
   console.log('TCP链接耗时：', timing.connectEnd - timing.connectStart)
   console.log('request耗时：', timing.responseEnd - timing.responseStart)
   console.log('解析DOM树耗时：', timing.domComplete - timing.domInteractive)
   console.log('白屏时间：', timing.domLoading - timing.fetchStart)
   console.log('domready时间：', timing.domContentLoadedEventEnd - timing.fetchStart)
   console.log('onload时间：', timing.loadEventEnd - timing.fetchStart)
  }, 0);
})
```

![](https://kodo.huixiangwuyou.com/blog/images/web/20250117163950.png)
- DNS 解析耗时: domainLookupEnd - domainLookupStart
- TCP 链接耗时: connectEnd - connectStart
- SSL 安全连接耗时: connectEnd - secureConnectionStart
- 网络请求耗时 (TTFB): responseStart - requestStart
- 数据传输耗时: responseEnd - responseStart
- DOM 解析耗时: domInteractive - responseEnd
- 资源加载耗时: loadEventStart - domContentLoadedEventEnd
- First Byte时间: responseStart - domainLookupStart
- 白屏时间: responseEnd - fetchStart
- 首次可交互时间: domInteractive - fetchStart
- DOM Ready 时间: domContentLoadEventEnd - fetchStart
- 页面完全加载时间: loadEventStart - fetchStart
- http 头部大小： transferSize - encodedBodySize
- 重定向次数：performance.navigation.redirectCount
- 重定向耗时: redirectEnd - redirectStart

```javascript
//拿到Performance并且初始化一些参数
let timing = performance.timing,
    start = timing.navigationStart,
    dnsTime = 0,
    tcpTime = 0,
    firstPaintTime = 0,
    domRenderTime = 0,
    loadTime = 0;
//根据提供的api和属性，拿到对应的时间
dnsTime = timing.domainLookupEnd - timing.domainLookupStart;
tcpTime = timing.connectEnd - timing.connectStart;
firstPaintTime = timing.responseStart - start;
domRenderTime = timing.domContentLoadedEventEnd - start;
loadTime = timing.loadEventEnd - start;

console.log('DNS解析时间:', dnsTime,'\nTCP建立时间:', tcpTime, 
'\n首屏时间:', firstPaintTime,'\ndom渲染完成时间:', domRenderTime, 
   '\n页面onload时间:', loadTime);
```    
